<template>
  <div class="caidan-main">
    <div class="caidan-left">
      <EchartPie :pieData="caidanDatas.fenleiPieData" :pieColor="pieColors" :labelColor="labelColor" :legendShow="true" :pieFormatter="totalValue" :pieRadius="pieRadius" :pieCenter="pieCenter" :labelFontsize="labelFontsize" :legendTop="legendTop" :legendFontsize="legendFontsize" :legendItemsize="legendItemsize" :legendItemGap="legendItemGap" :tooltipTrigger="tooltipTrigger" :seriesName="caidanDatas.name"></EchartPie>
    </div>
    <div class="caidan-right">
      <ElTable :tableConfig="caidanDatas.config" :tableData="caidanDatas.tableData" :headerShow="true" :canScroll="canScroll" :tableInterval="tableInterval"></ElTable>
    </div>
  </div>
</template>

<script>
import EchartPie from "@/components/EchartPie.vue";
import ElTable from "@/components/ElTable.vue";
import { request } from '@/api/request.js'
export default {
  name: 'ViewCaidan',
  data () {
    return {
      caidanDatas: {},
      pieRadius:['45%', '60%'],
      pieColors:["#3a8ee6","#5faabf","#17dddb"],
      labelColor:"#c5e1f0",
      pieCenter:['50%', '30%'],
      baseLabelFontsize: 30,
      labelFontsize: 30,
      legendTop: '55%',
      baseLegendFontsize: 11,
      legendFontsize: 11,
      baseLegendItemGap: 8,
      legendItemGap: 8,
      baseLegendItemsize: [10,8],
      legendItemsize: [10,8],
      tooltipTrigger:'item',
      totalValue: '1234',
      canScroll:false,
      tableInterval:2000
    }
  },
  mounted() {
    this.getCaidan();
    document.querySelector(".caidan-right").height = "21rem";
  },
  methods: {
    getCaidan(){
      request({
        url: '/jinricaidan',
        method: 'get'
      }).then(res=>{
        this.caidanDatas = res.data;
      })
    }
  },
  components: {
    EchartPie,
    ElTable
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: true,
      handler() {
        this.$nextTick(()=>{
          this.labelColor = this.$store.state.colors.barLabelZiColor;
          this.labelFontsize = this.baseLabelFontsize * parseFloat(this.$store.state.htmlScale);
          this.legendFontsize = this.baseLegendFontsize * parseFloat(this.$store.state.htmlScale);
          this.legendItemGap = this.baseLegendItemGap * parseFloat(this.$store.state.htmlScale);
          this.legendItemsize = this.baseLegendItemsize.map(item=>item*parseFloat(this.$store.state.htmlScale));
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.caidan-main{
  width: 100%;
  height: 85%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  border: 0px solid red;
  .caidan-left{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    border: 0px solid red;
  }
  .caidan-right{
    width: 60%;
    height: 21rem;
    // height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    border: 0px solid blue;
  }
}
</style>